<template>
	<!-- 内容组件 -->
	<view class="list" :style="{'paddingTop':paddingTop}">
		<view class="uni-margin-wrap">
			<swiper class="swiper" :duration="200" :current="labelInfo.tabIndex" @change="onswiperchange">
				<!-- 内容选项卡 -->
				<swiper-item v-for="(item,index) in indexArticleInfos" :key='index'>
					<view class="list-item">
						<view class="list-item-top">
							<view class="list-item-top-content">
								<scroll-view scroll-y="true" class="scroll-Y">
									<view id="demo1" class="scroll-view-item">
										{{item.textArticle}}
									</view>
								</scroll-view>
							</view>
						</view>
						<view class="list-item-bottom">
							<view class="share">
								分享
							</view>
							<view class="good">
								收藏{{item.love}}
							</view>
							<view class="comments" @click="commentsInfo(index)">
								评论{{item.comments}}
								<!-- 评论区 -->
								<wyb-popup ref="popup" type="bottom" height="400" width="500" radius="6" :showCloseIcon="true">
								    <view class="popup-content">
								        我是里面的内容{{index}}
										当然啦
										我需要评论说真的
								    </view>
								</wyb-popup>
							</view>
						</view>
					</view>
				</swiper-item>
			</swiper>
		</view>
		
		
	</view>
</template>

<script>
	import wybPopup from '../../../components/wyb-popup/wyb-popup.vue'
	export default {
		name: "list",
		props: {
			labelInfo: {
				type: Object,
				default: {}
			},
			//距离顶部
			paddingTop: {
				type: String,
				default: '120rpx'
			},
			indexArticleInfos:{
				type:Array,
				default:function(){
					return []
				}
			}
		},
		components: {
			wybPopup
		},
		data() {
			return {
				tabIndex: 0, //当前选中的项下标
			};
		},
		methods: {
			//视图滑动切换的时候，根据current来改变顶部栏的日期状态
			onswiperchange(e) {
				this.tabIndex = e.detail.current;
				console.log(e.detail.current);
				this.$emit("swiperIndex", e.detail.current)
			},
			commentsInfo(index){
				console.log(index);
				this.$refs.popup[index].show() // 显示
			}
		}
	}
</script>

<style lang="scss" scoped>
	.list {
		// padding-top: 80rpx;
		height: 100%;
		width: 100%;

		/deep/ .swiper {
			height: 480px;

			.list-item {
				margin: 30rpx;
				background-color: #fff;
				padding: 20rpx 20rpx 20rpx 20rpx;
				border-radius: 16rpx;
				overflow: hidden;

				.list-item-top {
					font-size: 36rpx;
					line-height: 2em;
					color: $uni-main-color;
					letter-spacing: 4rpx;
					text-align: justify;
					// font-family: 'STSong', 'STZhongsong', 'Microsoft YaHei';

					// overflow: hidden;
					// display: -webkit-box;
					// -webkit-box-orient: vertical;
					// -webkit-line-clamp: 10;
					width: 100%;
					overflow: hidden;

					.list-item-top-content{
						width: 95%;
						overflow: hidden;
						scroll-view{
							padding: 0 20rpx;
							height: 400px;
							width: 100%;
							.scroll-view-item{
								padding: 0 20rpx;
								box-sizing: border-box;
							}
						}
					}
					

				}

				.list-item-bottom {
					display: flex;
					align-items: center;
					justify-content: space-around;
					color: $uni-info-disable;
					padding: 10px 0;
				}
			}
		}
	}
</style>
